<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" fixed title="会员免费专区" placeholder bgColor="#fff">
      <view class="search" slot="center">
        <input v-model="searchVal" placeholder="输入关键内容" class="search-input" type="text">
        <view class="search-clear" v-if="searchVal!==''"  @click="clear">
          <image src="../../static/goods/clear.png" />
        </view>
        <view class="search-btn" @click="search">搜索</view>
      </view>
    </u-navbar>
    <view class="tabs-list">
      <u-tabs
        :list="specialZoneList"
        lineColor="#00C02F"
        lineWidth="64rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #00C02F;"
        :current="specialZoneCurrent"
        @change="specialZoneChange"
        :scrollable="false"
      >
      </u-tabs>
    </view>
    <scroll-view scroll-x class="type-list">
      <view class="type-item" v-for="(item, index) in typeList" :key="item.id" :class="{active: index == tabsCurrent}" @click="tabsChange({index})">{{ item.cateName }}</view>
    </scroll-view>
    <view class="goods-list" v-if="goodsList.length">
      <view class="goods-item" v-for="item in goodsList" :key="item.id" @click="jumpTo('/pages/goodsDetail/goodsDetail?id='+item.id)">
        <image style="width: 180rpx;height: 180rpx;flex-shrink: 0;border-radius: 8rpx 0rpx 0rpx 8rpx;" :src="item.subtitle?item.subtitle.split(',')[0]:''" mode="aspectFill" />
        <view class="u-flex-1 u-flex u-flex-column u-col-top u-row-between">
          <view class="name u-line-2">{{ item.title }}</view>
          <view class=" u-flex u-row-between" style="width: 100%;">
            <view class="price"><text>¥</text> {{ (item.priceCents/100).toFixed(2) }}</view>
            <view class="num">仅剩{{ item.totalInventory }}件</view>
          </view>
        </view>
      </view>
    </view>
    <a-empty v-else></a-empty>
  </view>
</template>

<script>
import pageBg from '../../static/memberBg.png'
import { getCategoriesList, getProductsList } from '@/api/index'

export default {
  data() {
    return {
      pageBg,
      searchVal: '',
      specialZoneCurrent: 0,
      specialZoneList: [
        {
          name: '免费商品',
        },
        {
          name: '精品推荐',
        },
      ],
      tabsCurrent: 0,
      typeList: [],
      goodsNum: 1,
      goodsList: [],
      pages: 0,
    };
  },
  async onLoad() {
    this.searchVal = uni.getStorageSync('searchVal')
    uni.removeStorageSync('searchVal')
    uni.showLoading({ mask: true })
    await this.getCategories()
    uni.hideLoading()
  },
  methods: {
    // 商品分类
    async getCategories() {
      await getCategoriesList({pageSize: 50, categoryType: this.specialZoneCurrent}).then(async res => {
        this.typeList = res.rows
        this.typeList.forEach(v => {
          v.cateName = '🍉 ' + v.cateName
        })
        // 重置分类下标
        this.tabsCurrent = 0
        // 重置商品分页
        this.goodsNum = 1
        this.goodsList = []
        await this.getProducts()
      })
    },
    async specialZoneChange(e) {
      // 大分类下标
      this.specialZoneCurrent = e.index
      // 查询商品分类
      await this.getCategories()
    },
    tabsChange(e) {
      // 分类下标
      this.tabsCurrent = e.index
      // 重置商品分页
      this.goodsNum = 1
      this.goodsList = []
      // 查询商品
      this.getProducts()
    },
    // 商品列表
    async getProducts() {
      uni.showLoading({ mask: true })
      await getProductsList({pageNum: this.goodsNum, pageSize: 20, status: 1, categoryId: this.typeList[this.tabsCurrent].id, title: this.searchVal}).then(res => {
        uni.hideLoading()
        this.goodsList = [...this.goodsList, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    },
    search() {
      this.goodsNum = 1
      this.goodsList = []
      this.getProducts()
    },
    clear() {
      this.searchVal = ''
      this.search()
    },

  },
  onReachBottom() {
    if(this.goodsNum < this.pages) {
      this.goodsNum++
      this.getProducts()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .search {
    width: 600rpx;
    height: 70rpx;
    background: rgba(245,245,245,1);
    border-radius: 200rpx;
    padding: 0 184rpx 0 32rpx;
    margin-left: 26rpx;
    position: relative;
    .search-input {
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      color: #333333;
    }
    .search-clear {
      position: absolute;
      right: 156rpx;
      top: 21rpx;
      width: 28rpx;
      height: 28rpx;
      image {
        width: 28rpx;
        height: 28rpx;
      }
    }
    .search-btn {
      position: absolute;
      right: 0;
      top: 4rpx;
      width: 128rpx;
      height: 62rpx;
      line-height: 62rpx;
      text-align: center;
      background: #56CB03;
      border-radius: 200rpx;font-size: 28rpx;
      color: #FFFFFF;
    }
  }
  .tabs-list {
    width: 100%;
    height: 90rpx;
    background: #FFFFFF;
    margin: 12rpx auto 20rpx;
  }
  .type-list {
    width: 702rpx;
    white-space: nowrap;
    margin: 0 auto 20rpx;
    .type-item {
      display: inline-block;
      padding: 14rpx 30rpx;
      background: #FFFFFF;
      border-radius: 200rpx;
      margin-right: 16rpx;
      font-size: 24rpx;
      color: #000000;
      border: 2rpx solid #FFFFFF;
    }
    .active {
      border: 2rpx solid #56CB03;
      color: #56CB03;
    }
  }
  .goods-list {
    width: 704rpx;
    display: flex;
    flex-direction: column;
    gap: 14rpx;
    margin: 0 auto;
    .goods-item {
      width: 100%;
      height: 180rpx;
      background: #fff;
      border-radius: 12rpx;
      display: flex;
      gap: 20rpx;
      padding: 0 28rpx 16rpx 0;
      .name {
        line-height: 88rpx;
        padding-top: 14rpx;
        font-size: 28rpx;
        color: #000000;
        line-height: 44rpx;
      }
      .price {
        font-weight: 500;
        font-size: 28rpx;
        color: #E20300;
        text {
          font-size: 24rpx;
        }
      }
      .num {
        font-size: 24rpx;
        color: #818181;
      }
    }
  }
}
</style>
